<template>
    <view>
        <view class="shop-book-card" @tap="watchBookDetail">
            <view class="book-img">
                <image mode="aspectFit"
                       :src="item.booksHead"/>
            </view>
            <view class="book-info ellipsis">{{item.booksName}}</view>
            <view class="book-author ellipsis">{{item.authorName || '暂无作者'}}</view>
            <view class="book-other-wrapper">
                <view class="book-others">
                    <text class="apply-age">{{item.booksMinAge}}-{{item.booksMaxAge}}岁</text>
                    <image mode="aspectFit"
                           class="common-img-size btn-collection"
                           @tap.stop="collectHandle(item.keep ? 'delCollect' : 'addCollect')"
                           :src="http+ (!item.keep ? 'wish2' : 'wish1')+'.png'"/>
                    <image mode="aspectFit"
                           class="common-img-size btn-shopping-car"
                           @tap.stop="shoppingCar(item.shopping ? 'delShopping' : 'addShopping')"
                           :src="http+(item.shopping ? 'shopping-active1' : 'shopping2')+'.png'"/>
                </view>
            </view>
        </view>
        <gw-user-login ref="userLogin" :modalType="modalType"/>
    </view>
</template>

<script>
    import { addShopOrCollect } from '@/util/commonFn'
    import gwUserLogin from '@/pages/components/gw-user-login'
    import { mapGetters } from 'vuex'
    export default {
        name: "shopBookCard",
        components: { gwUserLogin },
        computed: {
            ...mapGetters(['login', 'userInfo'])
        },
        props: {
            item: {
                default: ()=>{},
                type: Object
            }
        },
        data(){
            return {
                http: this.$https,
                modalType: 'login'
            }
        },
        methods: {
            collectHandle(type) {
                this.booksHandle(type, 'collect');
            },
            shoppingCar(type) {
                this.booksHandle(type, 'shopping');
            },
            booksHandle(type, name){
                if(!this.login){
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                if(!!this.userInfo.status){
                    this.modalType = 'bindPhone';
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                let that = this;
                addShopOrCollect(type, name, this.item.booksId).then(()=>{
                    that.$emit('updateBooks');
                })
            },
            watchBookDetail(){
                this.$emit('linkTo', this.item);
            },
        }
    }
</script>

<style scoped lang="scss">
    .shop-book-card{
        width:335rpx;
        height:456rpx;
        background:rgba(255,255,255,1);
        box-shadow:0px 3rpx 20rpx rgba(0,0,0,0.06);
        border-radius:8rpx;
        padding: 28rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        position: relative;
        .book-img{
            width:280rpx;
            height:210rpx;
            border-radius:4rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .book-info{
            font-size:24rpx;
            font-weight:bold;
            color:rgba(51,51,51,1);
            margin-top: 8rpx;
            max-height: 70rpx;
            -webkit-line-clamp: 2;
        }
        .book-author{
            font-size:24rpx;
            font-weight:400;
            color:rgba(153,153,153,1);
            margin-top: 10rpx;
            -webkit-line-clamp: 1;
        }
        .book-other-wrapper{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 30rpx 28rpx;
        }
        .book-others{
            /*margin-top: 25rpx;*/
            display: flex;
            .apply-age{
                font-size:24rpx;
                width:90rpx;
                height:38rpx;
                border:1rpx solid rgba(43,168,252,1);
                opacity:1;
                border-radius:10rpx 0px 10rpx 0px;
                font-weight:400;
                color:rgba(43,168,252,1);
                text-align: center;
                line-height: 38rpx;
            }
            .btn-collection, .btn-shopping-car{
                color: #A8A8A8;
                font-size: 46rpx;
            }
            .btn-collection{
                margin-left: 67rpx;
            }
            .btn-shopping-car{
                margin-left: 31rpx;
            }
        }
    }
</style>